<template>
	<view class="card-pack">
		<u-sticky>
			<u-tabs :list="tabsList" lineColor="#4786fe" :activeStyle="{
					color: '#2f75fa'
				}" :inactiveStyle="{
					color: '#353535'
				}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</u-sticky>

		<view class="list" v-if="list.length">
			<card-pack-item v-for="item in list" :key="item.id" :data="item" :showQrcode="currentTab !== 1"
				:lapse="currentTab === 1" @click="onClick(item)" />
		</view>

		<u-empty v-else text="暂无数据" icon="https://sass-test.doit10019.com/upload/202501/08114139-33838600519097990.jpg?attname=coupon.jpg" />
	</view>
</template>

<script>
	import cardPackItem from './card-pack-item.vue'
	const index = require('@/api/personal/index.js')
	export default {
		components: {
			cardPackItem
		},
		data() {
			return {
				currentTab: 0,
				tabsList: [{
						name: '待使用'
					},
					{
						name: '已失效'
					},
				],
				list: [

				],
				listQuery: { //分页
					limit: 5,
					page: 1,
				},
				totalPage: ""
			}
		},
		onLoad(options) {
		},
		onShow() {
			this.list = []
			this.getList()
		},
		methods: {
			// 获取我的卡包
			async getList() {
				let that = this;
				if (this.listQuery.page === 1) that.list = [];
				let params = {
					project_id: getApp().globalData.projectId, // user_id: uni.getStorageSync('phone'),
					open_id: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
					expired: this.currentTab,
					page: this.listQuery.page,
					limit: this.listQuery.limit,
				}
				let res = await index.getMyCard(params)
				if (res.code === 1) {
					// this.list = res.data.cardData
					this.list = this.list.concat(res.data.cardData); //将数据拼接在一起
					that.totalPage = res.data.page
				}
			},
			// 下拉刷新
			onReachBottom() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				if (this.totalPage <= this.listQuery.page) {
					// uni.hideLoading();
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.page += 1;
				this.getList()
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
				this.list = []
				this.listQuery.page = 1
				this.getList()
			},
			onClick(item) {
				if (this.currentTab === 0) {
					// `/pages/personal/qrcode/qrcode?goods_name=${item.goods_name}&ticketno=${item.ticketno}&title=我的票包&choose=选择票&goods_image=${item.goods_image}`
					uni.navigateTo({
						url: `/pages/personal/card-pack/card-details?cardno=${item.cardno}&id=${item.id}`
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-pack {
		padding-bottom: env(safe-area-inset-bottom);

		/deep/.u-tabs {
			background-color: #fff;
			border-bottom: 1px solid #E5E5E5;
			margin: 0 30rpx;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		.list {
			padding: 0 30rpx 30rpx 30rpx;
		}
	}
</style>